<template>
  <div>
    <el-row :gutter="20">
      <el-col :md="15" :sm="24">
        <el-card>
          <div slot="header" class="content-center">
            <span class="panel-title home-title welcome-title">{{ $t('m.Welcome_to')
              }}{{ websiteConfig.shortName }}</span>
          </div>
          <el-carousel :interval="interval" :height="srcHight" class="img-carousel" arrow="always"
            indicator-position="outside">
            <el-carousel-item v-for="(item, index) in carouselImgList" :key="index">
              <el-image :src="item.url" fit="fill">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </el-carousel-item>
          </el-carousel>
        </el-card>
        <Announcements class="card-top"></Announcements>
        <SubmissionStatistic class="card-top"></SubmissionStatistic>
        <el-card class="card-top">
          <div slot="header" class="clearfix">
            <span class="panel-title home-title">
              <i class="el-icon-magic-stick"></i> {{
                $t('m.Latest_Problem')
              }}</span>
          </div>
          <vxe-table border="inner" highlight-hover-row stripe :loading="loading.recentUpdatedProblemsLoading"
            auto-resize :data="recentUpdatedProblems" @cell-click="goProblem">
            <vxe-table-column field="problemId" :title="$t('m.Problem_ID')" min-width="100" show-overflow
              align="center">
            </vxe-table-column>
            <vxe-table-column field="title" :title="$t('m.Title')" show-overflow min-width="130" align="center">
            </vxe-table-column>
            <vxe-table-column field="gmtModified" :title="$t('m.Recent_Update')" show-overflow min-width="96"
              align="center">
              <template v-slot="{ row }">
                <el-tooltip :content="row.gmtModified | localtime" placement="top">
                  <span>{{ row.gmtModified | fromNow }}</span>
                </el-tooltip>
              </template>
            </vxe-table-column>
          </vxe-table>
        </el-card>
      </el-col>
      <el-col :md="9" :sm="24" class="phone-margin">
        <el-card :class="contests.length ? 'card-top' : ''">
          <div slot="header" class="clearfix">
            <span class="panel-title home-title">
              <i data-v-42bbb574="" class="el-icon-date"></i>
              {{ $t('m.Check_in') }}
              <vxe-table-column type="seq" min-width="50">
                <template>
                  <div class="card">
                    <h2>{{ $t('m.Nowtime') }}</h2>
                    <h3>{{ currentTime }}</h3>
                    <el-button type="primary" @click="checkIn">打卡</el-button>
                    <el-card v-if="showCard" class="card" style="margin-top: 10px;">
                      <div slot="header" class="clearfix" style="font-weight: bold">
                        <span :style="{ color:selectedSignText.luckyColor }">{{ selectedSignText.fortuneSummary }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text"
                          @click="showCard = false">关闭</el-button>
                      </div>
                      <el-row>
                        <el-col :span="24">
                          <div class="grid-content bg-purple-light" style="color:gold">
                            {{ selectedSignText.luckyStarRepeat }}
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <div class="grid-content bg-purple-light">
                            {{ selectedSignText.signText }}
                          </div>
                        </el-col>
                      </el-row>
                    </el-card>
                  </div>
                </template>
              </vxe-table-column>
            </span>
          </div>
        </el-card>
        <br>

        <template v-if="contests.length">
          <el-card>
            <div slot="header" class="clearfix title content-center">
              <div class="home-title home-contest">
                <i class="el-icon-trophy"></i> {{ $t('m.Recent_Contest') }}
              </div>
            </div>
            <el-card shadow="hover" v-for="(contest, index) in contests" :key="index" class="contest-card" :class="contest.status == 0
              ? 'contest-card-running'
              : 'contest-card-schedule'
              ">
              <div slot="header" class="clearfix contest-header">
                <a class="contest-title" @click="goContest(contest.id)">{{
                  contest.title
                  }}</a>
                <div class="contest-status">
                  <el-tag effect="dark" size="medium" :color="CONTEST_STATUS_REVERSE[contest.status]['color']">
                    <i class="fa fa-circle" aria-hidden="true"></i>
                    {{
                      $t('m.' + CONTEST_STATUS_REVERSE[contest.status]['name'])
                    }}
                  </el-tag>
                </div>
              </div>
              <div class="contest-type-auth">
                <template v-if="contest.type == 0">
                  <el-button :type="'primary'" round @click="goContestList(contest.type)" size="mini"
                    style="margin-right: 10px;"><i class="fa fa-trophy"></i>
                    {{ contest.type | parseContestType }}
                  </el-button>
                </template>
                <template v-else>
                  <el-tooltip :content="$t('m.Contest_Rank') +
                    '：' +
                    (contest.oiRankScoreType == 'Recent'
                      ? $t(
                        'm.Based_on_The_Recent_Score_Submitted_Of_Each_Problem'
                      )
                      : $t(
                        'm.Based_on_The_Highest_Score_Submitted_For_Each_Problem'
                      ))
                    " placement="top">
                    <el-button :type="'warning'" round @click="goContestList(contest.type)" size="mini"
                      style="margin-right: 10px;"><i class="fa fa-trophy"></i>
                      {{ contest.type | parseContestType }}
                    </el-button>
                  </el-tooltip>
                </template>
                <el-tooltip :content="$t('m.' + CONTEST_TYPE_REVERSE[contest.auth].tips)" placement="top"
                  effect="light">
                  <el-tag :type="CONTEST_TYPE_REVERSE[contest.auth]['color']" size="medium" effect="plain">
                    {{ $t('m.' + CONTEST_TYPE_REVERSE[contest.auth]['name']) }}
                  </el-tag>
                </el-tooltip>
              </div>
              <ul class="contest-info">
                <li>
                  <el-button type="primary" round size="mini" style="margin-top: 4px;"><i class="fa fa-calendar"></i>
                    {{
                      contest.startTime | localtime((format = 'MM-DD HH:mm'))
                    }}
                  </el-button>
                </li>
                <li>
                  <el-button type="success" round size="mini" style="margin-top: 4px;"><i class="fa fa-clock-o"></i>
                    {{ getDuration(contest.startTime, contest.endTime) }}
                  </el-button>
                </li>
                <li>
                  <el-button size="mini" round plain v-if="contest.count != null">
                    <i class="el-icon-user-solid" style="color:rgb(48, 145, 242);"></i>x{{ contest.count }}
                  </el-button>
                </li>
              </ul>
            </el-card>
          </el-card>
        </template>



        <el-card :class="contests.length ? 'card-top' : ''">
          <div slot="header" class="clearfix">
            <span class="panel-title home-title">
              <i class="el-icon-s-data"></i> {{ $t('m.Recent_7_Days_AC_Rank') }}
            </span>
          </div>
          <vxe-table border="inner" stripe auto-resize align="center" :data="recentUserACRecord" max-height="500px"
            :loading="loading.recent7ACRankLoading">
            <vxe-table-column type="seq" min-width="50">
              <template v-slot="{ rowIndex }">
                <span :class="getRankTagClass(rowIndex)">{{ rowIndex + 1 }}
                </span>
                <span :class="'cite no' + rowIndex"></span>
              </template>
            </vxe-table-column>
            <vxe-table-column field="username" :title="$t('m.Username')" min-width="200" align="left">
              <template v-slot="{ row }">
                <avatar :username="row.username" :inline="true" :size="25" color="#FFF" :src="row.avatar"
                  class="user-avatar"></avatar>
                <a @click="goUserHome(row.username, row.uid)" style="color:#2d8cf0;">{{ row.username }}</a>
                <span style="margin-left:2px" v-if="row.titleName">
                  <el-tag effect="dark" size="small" :color="row.titleColor">
                    {{ row.titleName }}
                  </el-tag>
                </span>
              </template>
            </vxe-table-column>
            <vxe-table-column field="ac" :title="$t('m.AC')" min-width="50" align="left">
            </vxe-table-column>
          </vxe-table>
        </el-card>
        <el-card class="card-top">
          <div slot="header" class="clearfix title">
            <span class="home-title panel-title">
              <i class="el-icon-monitor"></i> {{ $t('m.Supported_Remote_Online_Judge') }}
            </span>
          </div>
          <el-row :gutter="20">
            <el-col :md="8" :sm="24" v-for="(oj, index) in remoteJudgeList" :key="index">
              <a :href="oj.url" target="_blank">
                <el-tooltip :content="oj.name" placement="top">
                  <el-image :src="oj.logo" fit="fill" class="oj-logo" :class="oj.status ? 'oj-normal ' + oj.name : 'oj-error ' + oj.name
                    ">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </el-tooltip>
              </a>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import time from "@/common/time";
import api from "@/common/api";
import seedrandom from 'seedrandom';
import {
  CONTEST_STATUS_REVERSE,
  CONTEST_TYPE_REVERSE,
} from "@/common/constants";
import { mapState, mapGetters } from "vuex";
import Avatar from "vue-avatar";
import myMessage from "@/common/message";
const Announcements = () => import("@/components/oj/common/Announcements.vue");
const SubmissionStatistic = () =>
  import("@/components/oj/home/SubmissionStatistic.vue");
const crypto = require('crypto');
function md5(str) {
  return crypto.createHash('md5').update(str).digest('hex');
}
export default {
  name: "home",
  components: {
    Announcements,
    SubmissionStatistic,
    Avatar,
  },
  data() {
    return {
      showCard: false,// 默认不显示打卡卡片
      selectedSignText: {
        fortuneSummary: "大吉",
        luckyStar: 5,
        signText: "今天是个好日子，适合学习",
      },// 默认打卡内容
      interval: 5000,
      currentTime: '',
      timer: null, // 用于存储定时器ID
      recentUpdatedProblems: [],
      recentUserACRecord: [],
      CONTEST_STATUS_REVERSE: {},
      CONTEST_TYPE_REVERSE: {},
      contests: [],
      loading: {
        recent7ACRankLoading: false,
        recentUpdatedProblemsLoading: false,
        recentContests: false,
      },
      carouselImgList: [
        {
          url: "https://z1.ax1x.com/2023/12/09/pi20luQ.jpg",
        },
        {
          url: "https://z1.ax1x.com/2023/12/09/pi201Bj.jpg",
        },
      ],
      srcHight: "440px",
      remoteJudgeList: [
        {
          url: "http://www.szmsxx.cn/",
          name: "客观题",
          logo: require("@/assets/客观题.png"),
          status: true,
        },
        {
          url: "https://dazi.kukuw.com/",
          name: "打字测试",
          logo: "https://dazi.kukuw.com/style/images_new/kukuw_logo.png",
          status: true,
        },
        {
          url: "https://www.hellotyping.com/typing-game",
          name: "打字游戏",
          logo: require("@/assets/roket-child.png"),
          status: true,
        },        
        {
          url: "https://iai.sh.cn/",
          name: "上海计算机学会竞赛平台",
          logo: require("@/assets/iai.png"),
          status: true,
        },
        {
          url: "https://oi.sn.cn/",
          name: "陕西青少年竞赛平台",
          logo: require("@/assets/sn.png"),
          status: true,
        },
        {
          url: "https://oi-wiki.org/",
          name: "OI Wiki",
          logo: "https://oi-wiki.org/images/wordArt.webp",
          status: true,
        },
        // {
        //   url: "http://acm.hdu.edu.cn",
        //   name: "HDU",
        //   logo: require("@/assets/hdu-logo.png"),
        //   status: true,
        // },
        // {
        //   url: "http://poj.org",
        //   name: "POJ",
        //   logo: require("@/assets/poj-logo.png"),
        //   status: false,
        // },
        {
          url: "https://codeforces.com",
          name: "Codeforces",
          logo: require("@/assets/codeforces-logo.png"),
          status: true,
        },
        // {
        //   url: "https://codeforces.com/gyms",
        //   name: "GYM",
        //   logo: require("@/assets/gym-logo.png"),
        //   status: false,
        // },
        {
          url: "https://atcoder.jp",
          name: "AtCoder",
          logo: require("@/assets/atcoder-logo.png"),
          status: true,
        },
        // {
        //   url: "https://www.spoj.com",
        //   name: "SPOJ",
        //   logo: require("@/assets/spoj-logo.png"),
        //   status: false,
        // },
        // {
        //   url: "https://loj.ac/",
        //   name: "LibreOJ",
        //   logo: require("@/assets/libre-logo.png"),
        //   status: false,
        // },
        {
          url: "https://www.qceit.org.cn/",
          name: "电子学会等级考试",
          logo: require("@/assets/cie.png"),
          status: true,
        },
        {
          url: "https://gesp.ccf.org.cn/",
          name: "GESP",
          logo: require("@/assets/gesp.png"),
          status: true,
        },
        {
          url: "https://www.lanqiaoqingshao.cn/",
          name: "蓝桥青少",
          logo: require("@/assets/蓝桥杯.png"),
          status: true,
        },
        {
          url: "https://www.noi.cn/",
          name: "全国青少年信息学奥林匹克联赛",
          logo: require("@/assets/noi.png"),
          status: true,
        },
      ],
      checkinWords: [
        {
          "signText": "得而复失，枉费心机，守成无贪，可保安稳",
          "fortuneSummary": "吉带凶",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "草木逢春，枯叶沾露，稳健着实，必得人望",
          "fortuneSummary": "大吉",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "坎坷前途，苦难折磨，非有毅力，难望成功",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "美化丰实，鹤立鸡群，名利俱全，繁荣富贵",
          "fortuneSummary": "大吉+才艺",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "努力发达，贯彻志望，不忘进退，成功可期",
          "fortuneSummary": "中吉",
          "luckyStar": 5,
          "luckyColor": "green"
        },
        {
          "signText": "根深蒂固，蒸蒸日上，如意吉祥，百事顺遂",
          "fortuneSummary": "大吉+官运",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "吉中带凶，欲速不达，进不如守，可保安祥",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "吉运自来，能享盛名，把握机会，必获成功",
          "fortuneSummary": "吉",
          "luckyStar": 4,
          "luckyColor": "green"
        },
        {
          "signText": "忍得苦难，必有后福，是成是败，惟靠坚毅",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "中吉之数，进退保守，生意安稳，成就可期",
          "fortuneSummary": "中吉",
          "luckyStar": 4,
          "luckyColor": "green"
        },
        {
          "signText": "排除万难，有贵人助，把握时机，可得成功",
          "fortuneSummary": "中吉",
          "luckyStar": 5,
          "luckyColor": "green"
        },
        {
          "signText": "如走夜路，前途无光，希望不大，劳而无功",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "red"
        },
        {
          "signText": "此数大凶，破产之象，宜速改变，以避厄运",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "有得有失，华而不实，须防劫财，始保平安",
          "fortuneSummary": "吉带凶",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "努力经营，时来运转，旷野枯草，春来花开",
          "fortuneSummary": "中吉",
          "luckyStar": 4,
          "luckyColor": "green"
        },
        {
          "signText": "吉凶参半，惟赖勇气，贯彻力行，始可成功",
          "fortuneSummary": "吉带凶",
          "luckyStar": 3,
          "luckyColor": "green"
        },
        {
          "signText": "动摇不安，常陷逆境，不得时运，难得利润",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "red"
        },
        {
          "signText": "虽倾全力，难望成功，此数大凶，最好改名",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "有贵人助，可成大业，虽遇不幸，浮沉不大",
          "fortuneSummary": "大吉",
          "luckyStar": 5,
          "luckyColor": "green"
        },
        {
          "signText": "乌云遮月，暗淡无光，空费心力，徒劳无功",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "富贵荣华实可当，光明荣达好儿郎，家门隆昌福万千，世代子孙个个贤。",
          "fortuneSummary": "大吉+官运",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "事业不专，十九不成，专心进取，可望成功",
          "fortuneSummary": "吉带凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "利害混集，凶多吉少，得而复失，难以安顺",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "波澜起伏，千变万化，凌驾万难，必可成功",
          "fortuneSummary": "凶",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "成功虽早，慎防空亏，内外不合，障碍重重",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "大展鸿图，信用得固，无远弗界，可获成功",
          "fortuneSummary": "大吉",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "天时地利，再得人格，讲信修睦，即可成功",
          "fortuneSummary": "中吉",
          "luckyStar": 5,
          "luckyColor": "green"
        },
        {
          "signText": "先苦后甘，先甘后苦，如能守成，不致失败",
          "fortuneSummary": "吉带凶",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "池中之龙，风云际会，一跃上天，成功可望",
          "fortuneSummary": "中吉+财运",
          "luckyStar": 4,
          "luckyColor": "green"
        },
        {
          "signText": "黑夜漫长，进退维谷，内外不合，信用缺乏",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "不可意气，善用智慧，如能慎始，必可昌隆",
          "fortuneSummary": "大吉+财运+才艺",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "万宝云集，天降幸运，立志奋发，可成大功",
          "fortuneSummary": "中吉",
          "luckyStar": 5,
          "luckyColor": "green"
        },
        {
          "signText": "一成一败，一盛一衰，惟靠谨慎，可守成功",
          "fortuneSummary": "凶带吉",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "逢凶化吉，吉人天相，风条雨顺，生意兴隆",
          "fortuneSummary": "中吉+才艺",
          "luckyStar": 4,
          "luckyColor": "green"
        },
        {
          "signText": "灾难不绝，难望成功，此数大凶，不如更名",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "遇吉则吉，遇凶则凶，惟靠谨慎，逢凶化吉",
          "fortuneSummary": "凶",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "烦闷懊恼，事事难展，自防灾祸，始免困境",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "经商做事，顺利昌隆，如能慎始，百事亨通",
          "fortuneSummary": "中吉+才艺",
          "luckyStar": 5,
          "luckyColor": "green"
        },
        {
          "signText": "半凶半吉，浮沉多端，始凶终吉，能保成功",
          "fortuneSummary": "凶带吉",
          "luckyStar": 3,
          "luckyColor": "green"
        },
        {
          "signText": "秋草逢霜，怀才不遇，忧愁怨苦，事不如意",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "谦恭做事，必得人和，大事成就，一定兴隆",
          "fortuneSummary": "大吉+财运",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "安乐自来，自然吉祥，力行不懈，终必成功",
          "fortuneSummary": "中吉",
          "luckyStar": 4,
          "luckyColor": "green"
        },
        {
          "signText": "杨柳遇春，绿叶发枝，冲破难关，一举成名",
          "fortuneSummary": "中吉+官运",
          "luckyStar": 5,
          "luckyColor": "green"
        },
        {
          "signText": "鱼临旱地，难逃恶运，此数大凶，不如更名",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "虽抱奇才，有才无命，独营无力，财利无望",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "云遮半月，百隐风波，应自谨慎，始保平安",
          "fortuneSummary": "吉带凶",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "智高志大，历尽艰难，焦心忧劳，进退两难",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "天赋吉运，德望兼备，继续努力，前途无限",
          "fortuneSummary": "大吉+财运+官运",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "吉凶参半，得失相伴，投机取巧，如赛一样",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "一胜一衰，浮沉不定，知难而退，自获天佑",
          "fortuneSummary": "吉带凶",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "外观隆昌，内隐祸患，克服难关，开出泰运",
          "fortuneSummary": "吉带凶",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "草木逢春，雨过天晴，渡过难关，即获成功",
          "fortuneSummary": "大吉+财运",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "如龙得云，青云直上，智谋奋进，才略奏功",
          "fortuneSummary": "大吉+官运+财运+才艺",
          "luckyStar": 7,
          "luckyColor": "gold"
        },
        {
          "signText": "事与愿违，终难成功，欲速不达，有始有终",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "能获众望，成就大业，名利双收，盟主四方",
          "fortuneSummary": "大吉+官运+财运",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "见异思迁，十九不成，徒劳无功，不如更名",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "惨淡经营，难免贫困，此数不吉，最好改名",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "薄弱无力，孤立无摇，外祥内苦，谋事难成",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "一盛一衰，浮沉不常，自重自处，可保平安",
          "fortuneSummary": "吉带凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "吉凶互见，一成一败，凶中有吉，吉中有凶",
          "fortuneSummary": "吉带凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "万物化育，繁荣之象，专心一意，始能成功",
          "fortuneSummary": "大吉",
          "luckyStar": 5,
          "luckyColor": "green"
        },
        {
          "signText": "遇事犹疑，难望成事，大刀阔斧，始可有成",
          "fortuneSummary": "凶",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "雨夜之花，外祥内苦，忍耐自重，转凶为吉",
          "fortuneSummary": "吉带凶",
          "luckyStar": 2,
          "luckyColor": "red"
        },
        {
          "signText": "旭日升天，名显四方，渐次进展，终成大业",
          "fortuneSummary": "大吉+官运",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "专心经营，善用智慧，霜雪梅花，春来怒放",
          "fortuneSummary": "大吉+官运",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "此数大吉，名利双收，渐进向上，大业成就",
          "fortuneSummary": "大吉+官运",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "利不及费，坐食山空，如无智谋，难望成功",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "名虽可得，利则难获，艺界发展，可望成功",
          "fortuneSummary": "凶带吉",
          "luckyStar": 3,
          "luckyColor": "green"
        },
        {
          "signText": "天赋吉运，能得人望，善用智慧，必获成功",
          "fortuneSummary": "大吉+官运+才艺",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "波澜重迭，常陷穷困，动不如静，有才无命",
          "fortuneSummary": "大凶",
          "luckyStar": 0,
          "luckyColor": "crimson"
        },
        {
          "signText": "坎坷不平，艰难重重，若无耐心，难望有成",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "黑暗无光，心迷意乱，出尔反尔，难定方针",
          "fortuneSummary": "凶",
          "luckyStar": 1,
          "luckyColor": "red"
        },
        {
          "signText": "时来运转，事事如意，功成名就，富贵自来",
          "fortuneSummary": "大吉",
          "luckyStar": 6,
          "luckyColor": "green"
        },
        {
          "signText": "思虑周详，计划力行，不失先机，可望成功",
          "fortuneSummary": "大吉",
          "luckyStar": 6,
          "luckyColor": "green"
        }
      ],
    };
  },
  mounted() {
    let that = this;
    let screenWidth = window.screen.width;
    if (screenWidth < 768) {
      this.srcHight = "200px";
    } else {
      this.srcHight = "440px";
    }

    this.CONTEST_STATUS_REVERSE = Object.assign({}, CONTEST_STATUS_REVERSE);
    this.CONTEST_TYPE_REVERSE = Object.assign({}, CONTEST_TYPE_REVERSE);
    this.getHomeCarousel();
    this.getRecentContests();
    this.getRecent7ACRank();
    this.getRecentUpdatedProblemList();
    //this.updateTime();
    this.timer = setInterval(function () {
      that.currentTime = new Date().toLocaleString();
      that.$nextTick(() => {
        that.$forceUpdate(); // 强制更新组件
      });
    })
  },
  methods: {
    closeCard() {
      this.showCard = false; // 关闭打卡
    },
    getHomeCarousel() {
      api.getHomeCarousel().then((res) => {
        if (res.data.data != null && res.data.data.length > 0) {
          this.carouselImgList = res.data.data;
        }
      });
    },

    getRecentContests() {
      this.loading.recentContests = true;
      api.getRecentContests().then(
        (res) => {
          this.contests = res.data.data;
          this.loading.recentContests = false;
        },
        (err) => {
          this.loading.recentContests = false;
        }
      );
    },
    getRecentUpdatedProblemList() {
      this.loading.recentUpdatedProblemsLoading = true;
      api.getRecentUpdatedProblemList().then(
        (res) => {
          this.recentUpdatedProblems = res.data.data;
          this.loading.recentUpdatedProblemsLoading = false;
        },
        (err) => {
          this.loading.recentUpdatedProblemsLoading = false;
        }
      );
    },
    getRecent7ACRank() {
      this.loading.recent7ACRankLoading = true;
      api.getRecent7ACRank().then(
        (res) => {
          this.recentUserACRecord = res.data.data;
          this.loading.recent7ACRankLoading = false;
        },
        (err) => {
          this.loading.recent7ACRankLoading = false;
        }
      );
    },
    goContest(cid) {
      if (!this.isAuthenticated) {
        myMessage.warning(this.$i18n.t("m.Please_login_first"));
        this.$store.dispatch("changeModalStatus", { visible: true });
      } else {
        this.$router.push({
          name: "ContestDetails",
          params: { contestID: cid },
        });
      }
    },
    goContestList(type) {
      this.$router.push({
        name: "ContestList",
        query: {
          type,
        },
      });
    },
    goProblem(event) {
      this.$router.push({
        name: "ProblemDetails",
        params: {
          problemID: event.row.problemId,
        },
      });
    },
    goUserHome(username, uid) {
      this.$router.push({
        path: "/user-home",
        query: { uid, username },
      });
    },
    getDuration(startTime, endTime) {
      return time.formatSpecificDuration(startTime, endTime);
    },
    getRankTagClass(rowIndex) {
      return "rank-tag no" + (rowIndex + 1);
    },
    updateTime() {
      this.currentTime = new Date().toLocaleTimeString();
    },
    checkIn() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      userInfo = this.userInfo;
      var s = (parseInt(year) + parseInt(month) + parseInt(day) + 2) * 77836481;
      console.log(s);
      s=s.toString() + this.userInfo.username;
      const hash = md5(s);
      const random = seedrandom(hash);      
      const index = parseInt(random() * 77836481) % 74;
      this.showCard = true;
      console.log(index);
      this.selectedSignText = this.checkinWords[index];
      console.log(this.checkinWords[index]);
      this.selectedSignText['luckyStarRepeat'] = "⭐".repeat(this.selectedSignText['luckyStar']);
      var hollow="☆".repeat(7-this.selectedSignText['luckyStar']);
      this.selectedSignText['luckyStarRepeat']+=hollow;
    }
  },
  computed: {
    ...mapState(["websiteConfig"]),
    ...mapGetters(["isAuthenticated", 'userInfo']),
  },
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
};
</script>
<style>
.contest-card-running {
  border-color: rgb(25, 190, 107);
}

.contest-card-schedule {
  border-color: #f90;
}
</style>
<style scoped>
/deep/.el-card__header {
  padding: 0.6rem 1.25rem !important;
}

.card-top {
  margin-top: 20px;
}

.home-contest {
  text-align: left;
  font-size: 21px;
  font-weight: 500;
  line-height: 30px;
}

.oj-logo {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background: rgb(255, 255, 255);
  min-height: 47px;
  max-height: 47px;

}

.oj-normal {
  border-color: #409eff;
}

.oj-error {
  border-color: #e65c47;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.contest-card {
  margin-bottom: 20px;
}

.contest-title {
  font-size: 1.15rem;
  font-weight: 600;
}

.contest-type-auth {
  text-align: center;
  margin-top: -10px;
  margin-bottom: 5px;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.contest-info {
  text-align: center;
}

.contest-info li {
  display: inline-block;
  padding-right: 10px;
}

/deep/.contest-card-running .el-card__header {
  border-color: rgb(25, 190, 107);
  background-color: rgba(94, 185, 94, 0.15);
}

.contest-card-running .contest-title {
  color: #5eb95e;
}

/deep/.contest-card-schedule .el-card__header {
  border-color: #f90;
  background-color: rgba(243, 123, 29, 0.15);
}

.contest-card-schedule .contest-title {
  color: #f37b1d;
}

.content-center {
  text-align: center;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.welcome-title {
  font-weight: 600;
  font-size: 25px;
  font-family: "Raleway";
}

.contest-status {
  float: right;
}

.img-carousel {
  height: 490px;
}

@media screen and (max-width: 768px) {
  .contest-status {
    text-align: center;
    float: none;
    margin-top: 5px;
  }

  .contest-header {
    text-align: center;
  }

  .img-carousel {
    height: 220px;
    overflow: hidden;
  }

  .phone-margin {
    margin-top: 20px;
  }
}

.title .el-link {
  font-size: 21px;
  font-weight: 500;
  color: #444;
}

.clearfix h2 {
  color: #409eff;
}

.el-link.el-link--default:hover {
  color: #409eff;
  transition: all 0.28s ease;
}

.contest .content-info {
  padding: 0 70px 40px 70px;
}

.contest .contest-description {
  margin-top: 25px;
}

span.rank-tag.no1 {
  line-height: 24px;
  background: #bf2c24;
}

span.rank-tag.no2 {
  line-height: 24px;
  background: #e67225;
}

span.rank-tag.no3 {
  line-height: 24px;
  background: #e6bf25;
}

span.rank-tag {
  font: 16px/22px FZZCYSK;
  min-width: 14px;
  height: 22px;
  padding: 0 4px;
  text-align: center;
  color: #fff;
  background: #000;
  background: rgba(0, 0, 0, 0.6);
}

.user-avatar {
  margin-right: 5px !important;
  vertical-align: middle;
}

.cite {
  display: block;
  width: 14px;
  height: 0;
  margin: 0 auto;
  margin-top: -3px;
  border-right: 11px solid transparent;
  border-bottom: 0 none;
  border-left: 11px solid transparent;
}

.cite.no0 {
  border-top: 5px solid #bf2c24;
}

.cite.no1 {
  border-top: 5px solid #e67225;
}

.cite.no2 {
  border-top: 5px solid #e6bf25;
}

@media screen and (min-width: 1050px) {
  /deep/ .vxe-table--body-wrapper {
    overflow-x: hidden !important;
  }
}

/deep/.el-image {
  height: 100%;
  width: 100%;
}

.card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}
</style>
